其他
实现消息提示(小红点)就是这么简单
消息提示小红点的实现
kimiier的博客地址：
http://blog.csdn.net/qq_28268507/article/details/70314844
最近有些忙，版本不断叠加，需求一个接一个。这不，其中有一个需求就是在原有的版本上显示一个红点提示，类似于qq未读消息一样，需求图如下：
没错，看起来好简单，可我们再看下设计师给我们切的图(设计师很周到哈，这里谢谢谢谢，嘿嘿)
设计师是分不同状态来切的，如果我们按照这个思维去根据不同状态判断实现的话，不是不行，而是稍微麻烦了些。我们能不能尽量对以前代码做轻微的改动就能实现新的需求呢？当然是可以的了。看下以前代码是如何实现的：
<RadioGroup
android:id="@+id/bottom_radiogroup"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="1px"
android:background="@android:color/white"
android:gravity="center_vertical"
android:orientation="horizontal">
<RadioButton
android:id="@+id/home_index"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:drawablePadding="2dp"
android:drawableTop="@drawable/home_index_select"
android:gravity="center"
android:text="首页"
android:textColor="@color/home_select_color"
android:textSize="11sp" />
<RadioButton
android:id="@+id/home_bx"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="2dp"
android:drawableTop="@drawable/home_bx_select"
android:gravity="center"
android:text="保险"
android:textColor="@color/home_select_color"
android:textSize="11sp" />
<RadioButton
android:id="@+id/home_my"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="2dp"
android:drawableTop="@drawable/home_my_select"
android:gravity="center"
android:text="我的"
android:textColor="@color/home_select_color"
android:textSize="11sp" />
</RadioGroup>很简单，就一个RadioGroup 包含了三个RadioButton，我们都知道RadioGroup其实是继承Linearlayout的，所以这里让他的三个RadioButton平分，然后每个RadioButton在Gravity.Center居中显示即可，最后每个DrawableTop写一个selector就达到以前的需求了。
现在来看下新的需求，怎么办？自定义View可以完美实现这个需求,我们可以做到：
1.几乎不用改变以前的代码
2.不需要设计师给出的切图
3.不去关心各种状态，完全独立
代码如下：
public class NotifyRadioButton extends RadioButton {
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);float radius;boolean notify;public NotifyRadioButton(Context context, AttributeSet attrs) { super(context, attrs);
paint.setColor(Color.RED);
radius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 12.0f, context.getResources().getDisplayMetrics());
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (notify) {
Drawable drawable = getCompoundDrawables()[1];
Rect bounds = drawable.getBounds(); //float cx, float cy, float radius, @NonNull Paint paint
float cx = getMeasuredWidth() / 2 + bounds.width() / 2 - radius / 2; float cy = getPaddingTop() + bounds.height() / 4;
canvas.drawCircle(cx, cy, radius, paint);
}
}
/**
* 新消息提醒
*
* @param notify
*/
public void notify(boolean notify) {
this.notify = notify;
invalidate();
}
}思路：
首先我们继承自RadioButton，然后在canvas中自己绘制一个小红点即可。
canvas分析:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (notify) { //获取到DrawableTop, 0 drawableleft 1 drawabletop 2 drawableright 3 drawablebottom
Drawable drawable = getCompoundDrawables()[1]; //获取到Drawable的left right top bottom的值
Rect bounds = drawable.getBounds(); //这里分析：
//getMeasuredWidth() / 2 等于整个控件的水平位置中心点
//bounds.width() /2 drawable宽度的一半
//radius / 2 小圆点宽度的一半
//由于我们在布局文件中设置了Gravity为Center，所以最后小红点的x坐标为drawable图片右边对其+radius/2的位置上
float cx = getMeasuredWidth() / 2 + bounds.width() / 2 - radius / 2; //y就比较好定义了，为drawable 1/4即可
float cy = getPaddingTop() + bounds.height() / 4; //float cx, float cy, float radius, @NonNull Paint paint
//把小红点绘制上去
canvas.drawCircle(cx, cy, radius, paint);
}
}计算方式，大家好好理一理，下面测试。我们在以前布局中，将最后一个RadioButton替换为我们自定义的
<RadioGroup
android:id="@+id/bottom_radiogroup"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="1px"
android:background="@android:color/white"
android:gravity="center_vertical"
android:orientation="horizontal">
<RadioButton
android:id="@+id/home_index"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:drawablePadding="2dp"
android:drawableTop="@drawable/home_index_select"
android:gravity="center"
android:text="首页"
android:textColor="@color/home_select_color"
android:textSize="11sp" />
<RadioButton
android:id="@+id/home_bx"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="2dp"
android:drawableTop="@drawable/home_bx_select"
android:gravity="center"
android:text="保险"
android:textColor="@color/home_select_color"
android:textSize="11sp" />
<com.merchantshengdacar.view.NotifyRadioButton
android:id="@+id/home_my"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="2dp"
android:drawableTop="@drawable/home_my_select"
android:gravity="center"
android:text="我的"
android:textColor="@color/home_select_color"
android:textSize="11sp" />
</RadioGroup>然后在代码中，通过id找到控件，调用notify(true),run起来，效果图如下：
CSDN博客地址：:
http://blog.csdn.net/qq_28268507/article/details/70314844
终端研发部提倡： 没有做不到的，只有想不到的。
在这里获得的不仅仅是技术！
这里学到不仅仅是技术